@import '../../src/assets/css/default.less';

@prefixCls: yh-switch;
@off-fill-color: #FFFFFF;
@on-fill-color: @brand-primary;
@border-color: #E5E5E5;

.@{prefixCls} {
    display: inline-block;
    vertical-align: middle;
    box-sizing: border-box;
    position: relative;
    cursor: pointer;
    align-self: center;

    .switch {
        width: 48px;
        height: 26px;
        border-radius: 26px;
        box-sizing: border-box;
        z-index: 0;
        margin: 0;
        padding: 0;
        appearance: none;
        cursor: pointer;
        position: relative;
        transition: all 300ms;
        background: @off-fill-color;
        border: 1px solid @border-color; /* no */

        .switch-tag {
            width: 22px;
            height: 22px;
            border-radius: 22px;
            background: #FFFFFF;
            box-sizing: border-box;
            box-shadow: 0 2px 3px 0 rgba(0,0,0,0.22);
            position: absolute;
            top: 1px;
            left: 1px;
            z-index: 1;
            transform: translateX(0);
            transition: all 200ms;
        }

        &.switch-disabled {
            z-index: 3;
        }
    }

    input[type="checkbox"] {
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        border: 0 none;
        appearance: none;

        &:checked {
            & + .switch {
                background-color: @on-fill-color;
                border-color: @on-fill-color;

                .switch-tag {
                    transform: translateX(23px);
                }
            }
        }

        &:disabled {
            & + .switch {
                opacity: @opacity-disabled;
            }
        }

    }
}
